<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ path: '/search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user">
        <van-icon name="manager-o" @click="jump" />
      </div>
    </div>
    <!-- tab标签页 
    1.数量超过5个，标签项才能左右滚动--滑动
    2.sticky：实现吸顶效果
    3.swipeable：滑动内容，实现标签项的切换 -->
    <van-tabs v-model="active" sticky swipeable>
      <van-tab :title="cate.name" v-for="cate in cateList" :key="cate.id">
        <van-list
          v-model="cate.loading"
          :finished="cate.finished"
          :offset="5"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <van-pull-refresh v-model="cate.isLoading" @refresh="onRefresh">
            <hmpostBlock
              v-for="item in cate.postList"
              :key="item.id"
              :post="item"
            ></hmpostBlock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import hmpostBlock from "@/components/hmpostBlock.vue";
import { getCateList } from "@/apis/category.js";
import { getPostList } from "@/apis/post.js";
export default {
  components: {
    hmpostBlock,
  },
  data() {
    return {
      // 获取当前激活的active，打开首页时，应该让头条默认选中，如果登陆了，有了关注，那么active应该是1，否则是0
      active: localStorage.getItem("heimatoutiao_token") ? 1 : 0,
      cateList: [], //所有栏目的数据
      // postList: [], //栏目对应位置的新闻数据
    };
  },
  //   动态渲染
  async mounted() {
    // 首页加载之后，先读取本地存储中的栏目数据，--加载用户定制数据
    this.cateList = JSON.parse(localStorage.getItem("cateList") || "[]");
    if (this.cateList.length == 0) {
      let res = await getCateList();
      // console.log(res);
      // 获取栏目数据源
      this.cateList = res.data.data;
    } else {
      // 如果有本地存储，那么要手动添加头条和关注
      if (localStorage.getItem("heimatoutiao_token")) {
        this.cateList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        this.cateList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    }
    this.cateList = this.cateList.map((v) => {
      // 将数据存储到当前栏目的数组中
      return {
        ...v,
        postList: [], //添加了存储这个栏目新闻数据的数组
        pageIndex: 1, //当前栏目的页码
        pageSize: 6, //当前栏目的显示数量
        loading: false, //当前栏目的上拉加载的状态，为true说明在加载中
        finished: false, //当前栏目数据是否全部加载完毕，weitrue说明没有更多数据了
        isLoading: false, //当前栏目的下拉刷新状态，标识是否刷新
      };
    });
    this.getpost();
    // 实现栏目管理的入口，添加
    document.querySelector(".van-sticky").onclick = (e) => {
      console.log(e.target.className);
      // if (e.target.className == "van-sticky") {
      if (e.target.className.indexOf("van-sticky") !== -1) {
        // 说明点击的位置是入口位置
        this.$router.push({ name: "cateManager" });
      }
    };
  },
  //   监听器
  watch: {
    // 2、加载栏目的新闻数据
    async active() {
      if (this.cateList[this.active].postList.length == 0) {
        this.getpost();
      }
    },
  },
  methods: {
    // 点击跳转到个人中心
    jump() {
      // 判断是否有id，如果有就跳转到个人中心也
      let id = localStorage.getItem("heimatoutiao_userid");
      if (id) {
        this.$router.push({ path: `/personal/${id}` });
      } else {
        this.$toast.fail("未登陆，请先登陆");
        this.$router.push({ path: `/login` });
      }
    },
    // 上拉加载下一页数据
    onLoad() {
      // 加载下一页数据，就是将当前栏目的页码+1，再发送请求
      this.cateList[this.active].pageIndex++;
      // 异步更新数据
      // 数据全部加载完成
      this.getpost();
    },
    // 下拉刷新处理函数
    onRefresh() {
      //1.页码重新设置为1
      this.cateList[this.active].pageIndex = 1;
      // 2、将数据清空
      this.cateList[this.active].postList.length = 0;
      // 3、将之前可能重置为true的finished状态重置为false
      this.cateList[this.active].finished = false;
      // 数据全部加载完成
      this.getpost();
    },
    //  1、 封装方法 -- 加载栏目数据
    async getpost() {
      // this.cateList[this.active]：获取当前被激活项的栏目数据
      //   this.cateList[this.active].id：获取栏目的id
      // let id = this.cateList[this.active].id;
      let current = (
        await getPostList({
          category: this.cateList[this.active].id, //传递当前栏目的id
          pageIndex: this.cateList[this.active].pageIndex, //传递当前栏目的页面
          pageSize: this.cateList[this.active].pageSize, //传递当前栏目的显示数量
        })
      ).data.data;
      // 将获取到的新闻数据存储到当前栏目的postList数组中
      this.cateList[this.active].postList.push(...current);
      // 本次请求完成之后，将loading重置为false，以便下一次上啦
      this.cateList[this.active].loading = false;
      // 本次请求完成之后，将isloading重置为false，以便下一次下拉
      this.cateList[this.active].isLoading = false;
      // 判断数据是否已经全部加载完毕：要求6条数据，返回结果要是小于6条数据，说明真的没有数据了
      if (current.length < this.cateList[this.active].pageSize) {
        this.cateList[this.active].finished = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.index {
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: red;
    padding: 0 10px;
    color: #fff;
    .logo {
      span {
        font-size: 50px;
      }
    }
    .search {
      flex: 1;
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.6);
      margin-top: 5px;
      border-radius: 20px;
      margin: 0 10px;
    }
    .user {
      font-size: 20px;
    }
  }
}
/deep/ .van-sticky {
  padding-right: 44px;
  &::before {
    content: "+";
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    line-height: 36px;
    text-align: center;
    font-size: 30px;
  }
}
</style>